<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link to="/home/homePage">
      <van-icon name="wap-home-o" />
      首页</router-link>
      <router-link to="/home/Attention">
      <van-icon name="wap-home-o" />
      关注</router-link>
      <router-link to="/home/Add">
      <van-icon name="wap-home-o" />
      </router-link>
      <router-link to="/home/Strategy">
      <van-icon name="wap-home-o" />
      攻略</router-link>
      <router-link to="/home/My">
      <van-icon name="wap-home-o" />
      我的</router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body,
#app,
.home {
  width: 100%;
  height: 100%;
}
a{
  text-decoration: none;
}
.home {
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    overflow-y: scroll;
  }
  footer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ccc;
    a{
      display: flex;
      flex: 1;
      flex-direction: column;
      text-align: center;
      .van-icon{
        display: inline-block;
        font-size: 25px;
      }
     .router-link-active{
       color: red;
     }
    }
  }
}
</style>